<template>
  <div>
    <panle title='客户归属' content="客户归属列表"></panle>
    <el-form :inline="true" ref="resForm" :model="resForm" label-width="80px" class="demo-form-inline">

      <el-form-item label="订单号" prop="day_time">
        <el-input size="mini" placeholder="请输入订单号" v-model="resForm.order_num"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="day_time">
        <el-input size="mini" placeholder="请输入手机号" v-model="resForm.mobile"></el-input>
      </el-form-item>
      <el-form-item label="支付时间" prop="pay_time">
        <el-date-picker
            v-model="resForm.pay_time"
            type="daterange"
            align="right"
            size="mini"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="serach" size="mini">搜索</el-button>
        <el-button @click="resetForm('resForm')" size="mini">重置</el-button>
        <el-button size="mini" @click="init()">刷新</el-button>


      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
              v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="order_num" label="订单号"> </el-table-column>
      <el-table-column prop="title" label="课程名称"> </el-table-column>
      <el-table-column prop="total_fee" label="成交价格">
          <template slot-scope="scope">
            {{scope.row.total_fee/100}}
          </template>
      </el-table-column>
      <el-table-column prop="pay_time" label="支付时间"> </el-table-column>
      <el-table-column prop="wx_name" label="客户">
          <template slot-scope="scope">
              <el-image
                  style="width: 30px; height: 30px"
                  :src="scope.row.wx_avatar"
                  fit="cover"></el-image>
              <span> {{scope.row.wx_name}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column prop="username" label="预分配助教"></el-table-column>
      <el-table-column prop="id" label="操作" >
        <template slot-scope="scope">
          <PersButton type="text" size="mini" label="编辑预分配助教" icon="fa  fa-pencil" perms="scrm:client:customer:editCustomer" @click="editGreeting(scope.row)"></PersButton>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
                     :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="open" width="900px" append-to-body :title=" '选择助教'">
      <el-form ref="resForm" :model="resFormZhujiao"  label-width="80px">
        <el-table :data="tableDataZhuJiao" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
                  v-loading="loading" @selection-change="handleSelectionChangeZhujiao">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="userid" label="成员ID" width="155"></el-table-column>
          <el-table-column prop="name" label="成员名称"> </el-table-column>
        </el-table>

        <div class="block">

          <el-pagination @size-change="handleSizeChangeZhujiao" @current-change="handleCurrentChangeZhujiao" :current-page="pageNumber_zhujiao"
                         :page-sizes="[10, 50, 100, 200]" :page-size="pageSize_zhujiao" background layout="total, sizes, prev, pager, next, jumper"
                         :total="total_zhujiao">
          </el-pagination>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false" size="small">取 消</el-button>
        <el-button type="primary" @click=" subEditForm('resForm')  " size="small">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import {VueEditor} from "vue2-editor";

import Panle from '@/components/Panle.vue';
import PersButton from '@/components/PersButton.vue';

import {hasPermission, isShow} from '@/common/permission';
import {getStaffUser} from "@/api/scrm/staff/shortcutend";
import {addGroup, delGroup, editGroup, getGroupingList} from "@/api/scrm/staff/grouping";
import {editZhuJiao, getCourseIndex, getZhuJiaoList} from "@/api/scrm/client/customer";
import {dateFormat} from "@/utils";


export default {
  components: {
    Panle,
    PersButton,
    VueEditor
  },
  data() {
    return {
      loading: false,
      pageSize: 10, //一页显示多少条
      pageNumber: 1,
      total: 0, //总页数
      pageSize_zhujiao: 10, //一页显示多少条
      pageNumber_zhujiao: 1,
      total_zhujiao: 0, //总页数
      tableData: [],
      ids:0,
      serachword: '',
      formInline: {},
      resFormZhujiao:{},
      tableDataZhuJiao:[],
      open: false,
      resForm:{
        order_num: '',
        mobile: '',
        pay_time: [dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59'],
        pageSize: 10,
        pageNumber: 1,
        total: 0,
      },
      form: {
        "name": "",
        "content": "",
        "selectedList": [],
      },
      rules: {
        name: [{
          required: true,
          message: "分组名称不能为空",
          trigger: "blur"
        }],

      },
      parentDate: [],

      checkKey: [],
      multipleSelection: [],
      checkedAll: false,
      checked: true,
      checkList: [],
      selectedList: [],
      multipleSelectionZhujiao: [],
      multipleSelectionVideo: [],
      multipleSelectionFiles: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const current = new Date();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month).getTime());
              end.setTime(new Date(month + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const current = new Date();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month).getTime());
              end.setTime(new Date(month + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '上一周',
            onClick(picker) {
              const current = new Date();
              const start_day = current.getDate() - current.getDay() - 6;
              const end_day = current.getDate() - current.getDay();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month + start_day).getTime());
              end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
    }
  },
  created() {
    this.init();
  },
  methods: {
    hasPermission,
    isShow,
    init: function () {
      this.loading = true;
      let param = {
        "order_num" : this.resForm.order_num,
        "mobile" : this.resForm.mobile,
        "pay_time" : this.resForm.pay_time,
        "pageSize": this.pageSize,
        "pageNumber": this.pageNumber,
      }
      getCourseIndex(param).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      })

    },
    serach: function () {
      this.loading = true;
      this.resForm.pageSize = 10;
      this.resForm.pageNumber = 1;
      this.init();
    },
    resetForm() {
      this.resForm.order_num = ''
      this.resForm.mobile = ''
      this.resForm.pay_time = [dateFormat(new Date(), 'yyyy-MM-dd') + ' 00:00:00', dateFormat(new Date(), 'yyyy-MM-dd') + ' 23:59:59']
      this.init();
    },
    handleSizeChange: function (e) {
      console.log(e);
      this.pageSize = e;
      this.init();
    },
    handleCurrentChange: function (e) {
      console.log(e);
      this.pageNumber = e;
      this.init();
    },
    handleSizeChangeZhujiao: function (e) {
      console.log(e);
      this.pageSize_zhujiao = e;
      this.init();
    },
    handleCurrentChangeZhujiao: function (e) {
      console.log(e);
      this.pageNumber_zhujiao = e;
      this.init();
    },
    handleSelectionChangeZhujiao: function (val) {
      this.multipleSelectionZhujiao = val;
    },
    handleSelectionChange: function (e) {
      console.log(e);
      let selectChang = []
      for (let item of e) {
        selectChang.push(item.id)

      }
      this.multipleSelection = selectChang;
      console.log(selectChang);
    },

    add: async function () {
      this.form = {
        "name": "",

      };
      this.checkKey = [];
      this.open = true;
    },
    submitForm: function (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          addGroup(this.form).then((res) => {
            if (res.code == 200) {
              this.msgSuccess(res.msg);
              this.init();
              this.open = false;
            } else {
              this.msgError(res.msg);
            }
          })
        } else {
          return false;
        }
      })
    },
    delGreeitng: function (data) {
      this.$confirm('确定删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGroup(data).then((res) => {
          if (res.code == 200) {
            this.msgSuccess(res.msg);
            this.init();
          } else {
            this.msgError(res.msg);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    editGreeting: async function (data) {
     console.log('---111---',data);
     this.ids = data.ids;
     // await editZhuJiao(data).then((res) => {
     //   console.log('---222---',res);
     //   this.form = res.data;
     // })
     const res = await getZhuJiaoList(data);
     this.tableDataZhuJiao = res.data;
      // let editForm = {
      //   "name": res.name,
      //   "userid": res.userid,
      //
      // }
      // this.form = {...editForm};
      this.open = true;
    },
    subEditForm: function (data) {

      if(this.multipleSelectionZhujiao.length>1){
        this.msgError('只能选择一个助教');
        return ;
      }
      if(this.multipleSelectionZhujiao.length==0){
        this.msgError('未选择任何助教');
        return;
      }
      this.form.ids = this.ids;
      let userid = this.multipleSelectionZhujiao[0].userid;
      this.form.userid = userid;
      editZhuJiao(this.form).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg);
          this.init();
          this.open = false;

        } else {
          this.msgError(res.msg);
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/common";

.demo-form-inline {
  .el-form-item {
    margin-bottom: 0;
  }
}

.el-tree {
  max-height: 200px;
  overflow: auto;
  background: #f7f7f7;
}

.el-tree-node__label,
.el-textarea__inner {
  font-size: 12px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
  float: left;
  width: 100px;
}

.el-checkbox__label {
  font-size: 12px !important;
}
</style>
